<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Alias')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-alias" data-rule="required" class="form-control" name="row[alias]" type="text" value="{$row.alias|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Thickness')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-thickness" data-rule="required" class="form-control" step="0.01" name="row[thickness]" type="number" value="{$row.thickness|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Width')}:</label>
        <div class="col-xs-12 col-sm-8 location-relative">
            <input id="c-width" data-rule="required" class="form-control" step="0.01" name="row[width]" type="number" value="{$row.width|htmlentities}">
            <span class="location-absolute">mm</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Length')}:</label>
        <div class="col-xs-12 col-sm-8 location-relative">
            <input id="c-length" data-rule="required" class="form-control" step="0.01" name="row[length]" type="number" value="{$row.length|htmlentities}">
            <span class="location-absolute">m</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('面积')}:</label>
        <div class="col-xs-12 col-sm-8 location-relative">
            <input id="c-area" readonly class="form-control" name="row[area]" type="number">
            <span class="location-absolute">m²</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Color')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-color" data-rule="required" class="form-control" name="row[color]" type="text" value="{$row.color|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Density')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-density" data-rule="required" class="form-control" step="0.01" name="row[density]" type="number" value="{$row.density|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" data-source="category/selectpage" data-params='{"custom[type]":"clothmaking_product"}' class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Material')}:</label>
        <div class="col-xs-12 col-sm-8">     
            <input id="c-material_id" 
                data-rule="required" 
                data-source="clothmaking_material/selectpage"  
                class="form-control selectpage"  
                name="row[material_id]" 
                type="text" 
                data-field="name"  
                data-primary-key="id"  
                data-format-item="{name}"  
                value="{$row.material_id|htmlentities}">  

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stock')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-Stock" data-rule="required" class="form-control" name="row[stock]" type="number" value="{$row.stock|htmlentities}">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取输入元素
        var lengthInput = document.getElementById('c-length');
        var widthInput = document.getElementById('c-width');
        var areaInput = document.getElementById('c-area');
    
        // 计算面积的函数
        function calculateArea() {
            var length = parseFloat(lengthInput.value) || 0;
            var width = parseFloat(widthInput.value) || 0;
    
            // 如果长或宽为空，清空面积
            if (lengthInput.value === '' || widthInput.value === '') {
                areaInput.value = '';
                return;
            }
    
            var area = length * width * 0.001;
            areaInput.value = area;
        }
    
        // 监听长和宽的输入事件
        lengthInput.addEventListener('input', calculateArea);
        widthInput.addEventListener('input', calculateArea);
        calculateArea()
    });
</script>
<style>
    .location-relative {
        position: relative;
    }
    .location-absolute {
        position: absolute;
        top: 5px;
        right: 45px;
    }
</style>